import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_layout/tools/print_utils.dart';
import 'package:web_socket_channel/io.dart';

class WebSocketPage extends StatefulWidget {
  const WebSocketPage({Key? key}) : super(key: key);

  @override
  _WebSocketPageState createState() => _WebSocketPageState();
}

class _WebSocketPageState extends State<WebSocketPage> {
  StreamController<String>? _streamController;
  StreamController<String>? _streamController2;
  String? _title;
  bool? _isShowText = false;
  IOWebSocketChannel? channel;

  @override
  void initState() {
    try {
      channel = IOWebSocketChannel.connect('ws://echo.websocket.org');
    } catch (e) {
      PrintUtils.printByApp("报错啦 $e");
    }
    // StreamBuilder组件用于异步接收数据更新组件，与FutureBuilder不同的地方在于StreamBuilder可以接收多个异步操作。
    _streamController2 = StreamController();
    _streamController = StreamController(onListen: () {
      //首次进入调用
      PrintUtils.printByApp("-----------------------------------------onListen");
    }, onPause: () {
      PrintUtils.printByApp("-----------------------------------------onPause");
    }, onCancel: () {
      PrintUtils.printByApp("-----------------------------------------onCancel");
    }, onResume: () {
      //界面销毁时调用
      PrintUtils.printByApp("-----------------------------------------onResume");
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    PrintUtils.printByApp("-----------------------------------------build");
    return Scaffold(
        appBar: AppBar(
          title: const Text(''),
        ),
        body: Column(
          children: [
            StreamBuilder(
              stream: _streamController2!.stream,
              builder: (context, snapshot) {
                return Offstage(
                  child: Text(_isShowText! ? "显示" : ""),
                  offstage: !_isShowText!,
                );
                // Opacity(
                //   opacity: _isShowText! ? 1 : 0,
                //   child: Text(_isShowText! ? "显示" : ""),
                // );
                // return Visibility(
                //   child: Text(_isShowText! ? "显示" : ""),
                //   visible: _isShowText!,
                // );
              },
            ),
            StreamBuilder(
              stream: _streamController!.stream,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(snapshot.data.toString());
                }
                return const Text('未收到数据');
                // return Text(snapshot.hasData ? '${snapshot.data}' : '');
              },
            ),
            ElevatedButton(
              child: const Text('发送数据'),
              onPressed: () {
                // PrintUtils.printByApp("aaaaa");
                _title = _title ?? "老胡，一枚有态度的程序员";
                if (_title == "老胡，一枚有态度的程序员") {
                  _title = '老孟，一枚有态度的程序员';
                } else {
                  _title = '老胡，一枚有态度的程序员';
                }
                _isShowText = !_isShowText!;
                _streamController?.add(_title!);
                _streamController2?.add("");
                // _streamController?.done;
              },
            ),
          ],
        ));
  }

  @override
  dispose() {
    super.dispose();
    _streamController?.close();
  }
}
